//图片裁切组件
.ccui-image-clipper{
    position: fixed;
    left:0;
    top:0;
    z-index:1000;
    width:100%;
    height:100%;
    background-color: rgba(16,21,39,0.6);
    display:flex;
    justify-content: center;
    align-items: center;
    color: #40485b;
    -moz-user-select: none; 
    -webkit-user-select: none; 
    -ms-user-select: none; 
    -khtml-user-select: none; 
    user-select: none; 
    overflow: hidden;
    .ccui-content{
        background:#fff;
        width:580px;
        position: relative;
        
    }   
    //图片裁切标题
    .ccui-clipper-title{
        width:100%;
        height:44px;
        line-height:44px;
        background: #FCFCFC;
        border-bottom: 1px solid #e3e9ed;
        padding:0 24px;
        box-sizing: border-box;
        display:flex;
        justify-content: space-between;
    }
    //关闭按钮
    .ccui-clipper-title .iconfont{
        font-size:24px;
    }
    .ccui-clipper-title .iconfont:hover{
        color:#5C7B8B;
    }

    //中间裁切部分
    .ccui-clipper-center{
        width:100%;
        padding:24px 24px 6px;
        box-sizing: border-box;
        display:flex;
        justify-content: space-between;
    }
    .ccui-clipper-box{
        width:350px;
        height:350px;
        overflow: hidden;
        cursor: move;
        background: url(./clipperBg.png) repeat;
        box-sizing: border-box;
        position: relative;
    }
    //背景遮罩
    .ccui-mask {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index:1;
        background-color: rgba(0, 0, 0, 0.4);
    }
    .ccui-container{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index:2;       
    }
    
    //预览
    .ccui-preview-box{
        width:180px;
        text-align: center;
    }
    .ccui-preview-img{
        display:inline-block;
        margin-top:10px;
    }
    //底部
    .ccui-clipper-footer{
        padding:0 24px 24px;
        display:flex;
        justify-content: space-between;
    }
    .ccui-clipper-group .iconfont{
        font-size:24px;
        cursor: pointer;
    }
    .ccui-clipper-btn .ccui-btn-same{
        width:54px;
        height:32px;
        line-height:32px;
        font-size:14px;
        margin:0 5px;
        display:inline-block
    }

    //按钮样式颜色
    .ccui-blue-btn{
        border:1px solid #37A2A0;
        background-color:#44c8c6;
        color:#fff;
        border-radius: 4px;
        font-weight:400;
        cursor: pointer;
        text-align: center;
        box-sizing: border-box;
    }
    .ccui-blue-btn:hover{
        background-color:#69D3D1;
    }
    .ccui-blue-btn:active{
        background-color: #3DB4B2;
    }
    .ccui-blue-btn[disabled]{
        background-color:#A1E3E2;
        border:1px solid #9BD0CF;
    }
    .ccui-grey-btn{
        border:1px solid #C7C7C7;
        background-color:#F7F7F7;
        color:#333;
        border-radius: 4px;
        font-weight:400;
        cursor: pointer;
        text-align: center;
        box-sizing: border-box;
    }
    .ccui-grey-btn:hover{
        background-color:#fff;
    }
    .ccui-grey-btn:active{
        background-color: #DEDEDE;
    }
    .ccui-grey-btn[disabled]{
        background-color:#FBFBFB;
        border:1px solid #C7C7C7;
        color:#999;
    }
}